<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set value="${pageContext.request.contextPath}" var="ctx"/>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Title -->
    <title>Home</title>

    <!-- Favicon -->
    <link rel="icon" href="${ctx}/img/core-img/favicon.ico">

    <!-- Stylesheet -->
    <link rel="stylesheet" href="${ctx}/style.css">

</head>

<body>
<!-- Preloader -->
<div class="preloader d-flex align-items-center justify-content-center">
    <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
</div>

<!-- ##### Header Area Start ##### -->
<header class="header-area wow fadeInDown" data-wow-delay="500ms">
    <!-- Top Header Area -->
    <div class="top-header-area">
        <div class="container h-100">
            <div class="row h-100 align-items-center">
                <div class="col-12 d-flex align-items-center justify-content-between">
                    <!-- Logo Area -->
                    <div class="logo">
                        <a href="index.jsp"><img src="${ctx}/img/core-img/logo.png" alt=""></a>
                    </div>

                    <!-- Search & Login Area -->
                    <div class="search-login-area d-flex align-items-center">
                        <!-- Top Search Area -->
                        <div class="top-search-area">
                            <form action="fuzzyFind" method="post">
                                <label for="topSearch"></label><input type="search" name="gameName" id="topSearch"
                                                                      placeholder="搜索游戏">
                                <button type="submit" class="btn"><i class="fa fa-search"></i></button>
                            </form>
                        </div>
                        <!-- Login Area -->
                        <div class="login-area">
                                <c:choose>
                                    <c:when test="${user == null}">
                                    <a href="login_register.jsp">
                                        <span>登陆 / 注册</span>
                                    </c:when>
                                    <c:otherwise>
                                        <a href="showUserInfo?id=${user.id}">
                                        <span>Welcome ${user.name}</span>
                                    </c:otherwise>
                                </c:choose>
                                <i class="fa fa-lock" aria-hidden="true"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Navbar Area -->
    <div class="egames-main-menu" id="sticker">
        <div class="classy-nav-container breakpoint-off">
            <div class="container">
                <!-- Menu -->
                <nav class="classy-navbar justify-content-between" id="egamesNav">

                    <!-- Navbar Toggler -->
                    <div class="classy-navbar-toggler">
                        <span class="navbarToggler"><span></span><span></span><span></span></span>
                    </div>

                    <!-- Menu -->
                    <div class="classy-menu">

                        <!-- Close Button -->
                        <div class="classycloseIcon">
                            <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
                        </div>

                        <!-- Nav Start -->
                        <div class="classynav">
                            <ul>
                                <li><a href="index.jsp">首页</a></li>
                                <li><a href="user_gameList?pageNum=1">概况</a>
                                    <ul class="dropdown">
                                        <li><a href="user_gameList?pageNum=1">游戏浏览</a></li>
                                        <li><a href="#">游戏独览</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">页面</a>
                                    <ul class="dropdown">
                                        <li><a href="index.jsp">首页</a></li>
                                        <li><a href="post.jsp">全部文章</a></li>
                                        <li><a href="single-post.jsp">单篇文章</a></li>
                                        <li><a href="user_gameList?pageNum=1">游戏浏览</a></li>
                                        <li><a href="#">游戏独览</a></li>
                                        <li><a href="contact.jsp">联系我们</a></li>
                                    </ul>
                                </li>
                                <li><a href="post.jsp">文章</a>
                                    <ul class="dropdown">
                                        <li><a href="article.html">全部文章</a></li>
                                        <li><a href="addArtucle.html">添加文章</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">概况</a>
                                    <ul class="dropdown">
                                        <li><a href="user_gameList?pageNum=1">游戏预览</a></li>
                                        <li><a href="#">游戏独览</a></li>
                                    </ul>
                                </li>
                                <li><a href="contact.jsp">联系我们</a></li>
                                <c:if test="${user!=null}">
                                	<li><a href="${ctx}/items?uid=${user.id }">我的购物车</a>
                                	<li><a href="${ctx}/showLibrary?uid=${user.id }">我的库</a>
                                </c:if>
                            </ul>
                        </div>
                        <!-- Nav End -->
                    </div>

                    <!-- Top Social Info -->
                    <div class="top-social-info" style="height: 70px">
                        <a href="addMoney.jsp" class="btn egames-btn" style="margin:0 auto">充值</a>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</header>
<!-- ##### Header Area End ##### -->

<!-- ##### Hero Area Start ##### -->
<div class="hero-area">
    <!-- Hero Post Slides -->
    <div class="hero-post-slides owl-carousel">

        <!-- Single Slide -->
        <div class="single-slide bg-img bg-overlay" style="background-image: url(img/bg-img/1.jpg);">
            <!-- Blog Content -->
            <div class="container h-100">
                <div class="row h-100 align-items-center">
                    <div class="col-12 col-lg-9">
                        <div class="blog-content" data-animation="fadeInUp" data-delay="100ms">
                            <h2 data-animation="fadeInUp" data-delay="400ms">游戏的力量</h2>
                            <p data-animation="fadeInUp" data-delay="700ms">
                                “游戏是儿童期最纯净也最具心灵性的活动，同时更是人类整体向外的表达方式。”——福禄贝尔</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Single Slide -->
        <div class="single-slide bg-img bg-overlay" style="background-image: url(img/bg-img/2.jpg);">
            <!-- Blog Content -->
            <div class="container h-100">
                <div class="row h-100 align-items-center">
                    <div class="col-12 col-lg-9">
                        <div class="blog-content" data-animation="fadeInUp" data-delay="100ms">
                            <h2 data-animation="fadeInUp" data-delay="400ms">游戏的力量</h2>
                            <p data-animation="fadeInUp" data-delay="700ms">
                                “孩子的好奇心是一种追求知识的欲望，应该加以鼓励，因为这是自然为他们准备的好工具。”——洛克</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<!-- ##### Hero Area End ##### -->

<!-- ##### Games Area Start ##### -->
<div class="games-area section-padding-100-0">
    <div class="container">
        <div class="row">
            <!-- Single Games Area -->
            <div class="col-12 col-md-4">
                <div class="single-games-area text-center mb-100 wow fadeInUp" data-wow-delay="100ms">
                    <img src="${ctx}/img/bg-img/game1.jpg" alt="">
                    <a href="#" class="btn egames-btn mt-30">查看所有PlayStation4游戏</a>
                </div>
            </div>

            <!-- Single Games Area -->
            <div class="col-12 col-md-4">
                <div class="single-games-area text-center mb-100 wow fadeInUp" data-wow-delay="300ms">
                    <img src="${ctx}/img/bg-img/game2.jpg" alt="">
                    <a href="#" class="btn egames-btn mt-30">查看所有WII游戏</a>
                </div>
            </div>

            <!-- Single Games Area -->
            <div class="col-12 col-md-4">
                <div class="single-games-area text-center mb-100 wow fadeInUp" data-wow-delay="500ms">
                    <img src="${ctx}/img/bg-img/game3.jpg" alt="">
                    <a href="#" class="btn egames-btn mt-30">查看所有XBOX游戏</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ##### Games Area End ##### -->

<!-- ##### Monthly Picks Area Start ##### -->
<section class="monthly-picks-area section-padding-100 bg-pattern">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="left-right-pattern"></div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-12">
                <!-- Title -->
                <h2 class="section-title mb-70 wow fadeInUp" data-wow-delay="100ms">本月精选</h2>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <ul class="nav nav-tabs wow fadeInUp" data-wow-delay="300ms" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="popular-tab" data-toggle="tab" href="#popular" role="tab"
                           aria-controls="popular" aria-selected="true">最流行</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="latest-tab" data-toggle="tab" href="#latest" role="tab"
                           aria-controls="latest" aria-selected="false">最新</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="editor-tab" data-toggle="tab" href="#editor" role="tab"
                           aria-controls="editor" aria-selected="false">编辑推荐</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="tab-content wow fadeInUp" data-wow-delay="500ms" id="myTabContent">
        <div class="tab-pane fade show active" id="popular" role="tabpanel" aria-labelledby="popular-tab">
            <!-- Popular Games Slideshow -->
            <div class="popular-games-slideshow owl-carousel">

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/50.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">Grand Theft Auto V</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">动作</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/51.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">Doom</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">冒险</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/52.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">God of War</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">动作</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/53.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">Bloodborne</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">冒险</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/54.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">Persona 5</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">动作</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/52.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">God of War</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">动作</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/53.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">Bloodborne</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">冒险</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/54.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">Persona 5</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">动作</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="tab-pane fade" id="latest" role="tabpanel" aria-labelledby="latest-tab">
            <!-- Latest Games Slideshow -->
            <div class="latest-games-slideshow owl-carousel">

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/50.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">Grand Theft Auto V</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">动作</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/51.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">Doom</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">冒险</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/52.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">God of War</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">动作</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/53.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">Bloodborne</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">冒险</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/54.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">Persona 5</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">动作</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/52.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">God of War</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">动作</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/53.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">Bloodborne</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">冒险</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/54.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">Persona 5</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">动作</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="tab-pane fade" id="editor" role="tabpanel" aria-labelledby="editor-tab">
            <!-- Editor Games Slideshow -->
            <div class="editor-games-slideshow owl-carousel">

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/50.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">Grand Theft Auto V</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">动作</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/51.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">Doom</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">冒险</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/52.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">God of War</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">动作</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/53.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">Bloodborne</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">冒险</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/54.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">Persona 5</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">动作</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/52.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">God of War</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">动作</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/53.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">Bloodborne</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">冒险</a>
                        </div>
                    </div>
                </div>

                <!-- Single Games -->
                <div class="single-games-slide">
                    <img src="${ctx}/img/bg-img/54.jpg" alt="">
                    <div class="slide-text">
                        <a href="#" class="game-title">Persona 5</a>
                        <div class="meta-data">
                            <a href="#">User: 9.1/10</a>
                            <a href="#">动作</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
<!-- ##### Monthly Picks Area End ##### -->

<!-- ##### Video Area Start ##### -->
<div class="egames-video-area section-padding-100 bg-pattern2">
    <div class="container">
        <div class="row no-gutters">
            <div class="col-12 col-md-6 col-lg-4">
                <div class="egames-nav-btn">
                    <div class="nav flex-column" id="video-tab" role="tablist" aria-orientation="vertical">
                        <a class="nav-link active" id="video1" data-toggle="pill" href="#video-1" role="tab"
                           aria-controls="video-1" aria-selected="true">
                            <!-- Single Video Widget -->
                            <div class="single-video-widget d-flex wow fadeInUp" data-wow-delay="100ms">
                                <div class="video-thumbnail">
                                    <img src="${ctx}/img/bg-img/14.jpg" alt="">
                                </div>
                                <div class="video-text">
                                    <p class="video-title mb-0">集合您的小队并加入战斗</p>
                                    <span>Nintendo Wii, PS4, XBox 360</span>
                                </div>
                                <div class="video-rating">8.3/10</div>
                            </div>
                        </a>

                        <a class="nav-link" id="video2" data-toggle="pill" href="#video-2" role="tab"
                           aria-controls="video-2" aria-selected="false">
                            <!-- Single Video Widget -->
                            <div class="single-video-widget d-flex wow fadeInUp" data-wow-delay="200ms">
                                <div class="video-thumbnail">
                                    <img src="${ctx}/img/bg-img/15.jpg" alt="">
                                </div>
                                <div class="video-text">
                                    <p class="video-title mb-0">改善游戏的技巧</p>
                                    <span>Nintendo Wii, PS4, XBox 360</span>
                                </div>
                                <div class="video-rating">8.3/10</div>
                            </div>
                        </a>

                        <a class="nav-link" id="video3" data-toggle="pill" href="#video-3" role="tab"
                           aria-controls="video-3" aria-selected="false">
                            <!-- Single Video Widget -->
                            <div class="single-video-widget d-flex wow fadeInUp" data-wow-delay="300ms">
                                <div class="video-thumbnail">
                                    <img src="${ctx}/img/bg-img/16.jpg" alt="">
                                </div>
                                <div class="video-text">
                                    <p class="video-title mb-0">游戏评论：2018年最佳</p>
                                    <span>Nintendo Wii, PS4, XBox 360</span>
                                </div>
                                <div class="video-rating">8.3/10</div>
                            </div>
                        </a>

                        <a class="nav-link" id="video4" data-toggle="pill" href="#video-4" role="tab"
                           aria-controls="video-4" aria-selected="false">
                            <!-- Single Video Widget -->
                            <div class="single-video-widget d-flex wow fadeInUp" data-wow-delay="400ms">
                                <div class="video-thumbnail">
                                    <img src="${ctx}/img/bg-img/17.jpg" alt="">
                                </div>
                                <div class="video-text">
                                    <p class="video-title mb-0">加入我们吧</p>
                                    <span>Nintendo Wii, PS4, XBox 360</span>
                                </div>
                                <div class="video-rating">8.3/10</div>
                            </div>
                        </a>

                        <a class="nav-link" id="video5" data-toggle="pill" href="#video-5" role="tab"
                           aria-controls="video-5" aria-selected="false">
                            <!-- Single Video Widget -->
                            <div class="single-video-widget d-flex wow fadeInUp" data-wow-delay="500ms">
                                <div class="video-thumbnail">
                                    <img src="${ctx}/img/bg-img/18.jpg" alt="">
                                </div>
                                <div class="video-text">
                                    <p class="video-title mb-0">畅游游戏世界</p>
                                    <span>Nintendo Wii, PS4, XBox 360</span>
                                </div>
                                <div class="video-rating">8.3/10</div>
                            </div>
                        </a>

                        <a class="nav-link" id="video6" data-toggle="pill" href="#video-6" role="tab"
                           aria-controls="video-6" aria-selected="false">
                            <!-- Single Video Widget -->
                            <div class="single-video-widget d-flex wow fadeInUp" data-wow-delay="600ms">
                                <div class="video-thumbnail">
                                    <img src="${ctx}/img/bg-img/14.jpg" alt="">
                                </div>
                                <div class="video-text">
                                    <p class="video-title mb-0">年度最佳：Grand Theft Auto V</p>
                                    <span>Nintendo Wii, PS4, XBox 360</span>
                                </div>
                                <div class="video-rating">8.3/10</div>
                            </div>
                        </a>

                        <a class="nav-link" id="video7" data-toggle="pill" href="#video-7" role="tab"
                           aria-controls="video-7" aria-selected="false">
                            <!-- Single Video Widget -->
                            <div class="single-video-widget d-flex wow fadeInUp" data-wow-delay="700ms">
                                <div class="video-thumbnail">
                                    <img src="${ctx}/img/bg-img/15.jpg" alt="">
                                </div>
                                <div class="video-text">
                                    <p class="video-title mb-0">您最好的陪伴</p>
                                    <span>Nintendo Wii, PS4, XBox 360</span>
                                </div>
                                <div class="video-rating">8.3/10</div>
                            </div>
                        </a>

                        <a class="nav-link" id="video8" data-toggle="pill" href="#video-8" role="tab"
                           aria-controls="video-8" aria-selected="false">
                            <!-- Single Video Widget -->
                            <div class="single-video-widget d-flex wow fadeInUp" data-wow-delay="800ms">
                                <div class="video-thumbnail">
                                    <img src="${ctx}/img/bg-img/16.jpg" alt="">
                                </div>
                                <div class="video-text">
                                    <p class="video-title mb-0">跟家人一起游戏</p>
                                    <span>Nintendo Wii, PS4, XBox 360</span>
                                </div>
                                <div class="video-rating">8.3/10</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-8">
                <div class="tab-content" id="video-tabContent">
                    <div class="tab-pane fade show active" id="video-1" role="tabpanel" aria-labelledby="video1">
                        <div class="video-playground bg-img" style="background-image: url(img/bg-img/45.jpg);">
                            <!-- Play Button -->
                            <div class="play-btn">
                                <a href="#" class="play-button"><img src="${ctx}/img/core-img/play.png" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="video-2" role="tabpanel" aria-labelledby="video2">
                        <div class="video-playground bg-img" style="background-image: url(img/bg-img/46.jpg);">
                            <!-- Play Button -->
                            <div class="play-btn">
                                <a href="#" class="play-button"><img src="${ctx}/img/core-img/play.png" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="video-3" role="tabpanel" aria-labelledby="video3">
                        <div class="video-playground bg-img" style="background-image: url(img/bg-img/47.jpg);">
                            <!-- Play Button -->
                            <div class="play-btn">
                                <a href="#" class="play-button"><img src="${ctx}/img/core-img/play.png" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="video-4" role="tabpanel" aria-labelledby="video4">
                        <div class="video-playground bg-img" style="background-image: url(img/bg-img/48.jpg);">
                            <!-- Play Button -->
                            <div class="play-btn">
                                <a href="#" class="play-button"><img src="${ctx}/img/core-img/play.png" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="video-5" role="tabpanel" aria-labelledby="video5">
                        <div class="video-playground bg-img" style="background-image: url(img/bg-img/49.jpg);">
                            <!-- Play Button -->
                            <div class="play-btn">
                                <a href="#" class="play-button"><img src="${ctx}/img/core-img/play.png" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="video-6" role="tabpanel" aria-labelledby="video6">
                        <div class="video-playground bg-img" style="background-image: url(img/bg-img/45.jpg);">
                            <!-- Play Button -->
                            <div class="play-btn">
                                <a href="#" class="play-button"><img src="${ctx}/img/core-img/play.png" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="video-7" role="tabpanel" aria-labelledby="video7">
                        <div class="video-playground bg-img" style="background-image: url(img/bg-img/46.jpg);">
                            <!-- Play Button -->
                            <div class="play-btn">
                                <a href="#" class="play-button"><img src="${ctx}/img/core-img/play.png" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="video-8" role="tabpanel" aria-labelledby="video8">
                        <div class="video-playground bg-img" style="background-image: url(img/bg-img/47.jpg);">
                            <!-- Play Button -->
                            <div class="play-btn">
                                <a href="#" class="play-button"><img src="${ctx}/img/core-img/play.png" alt=""></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ##### Video Area End ##### -->

<!-- ##### Articles Area Start ##### -->
<section class="latest-articles-area section-padding-100-0 bg-img bg-pattern bg-fixed"
         style="background-image: url(img/bg-img/5.jpg);">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-8">
                <div class="mb-100">
                    <!-- Title -->
                    <h2 class="section-title mb-70 wow fadeInUp" data-wow-delay="100ms">最新文章</h2>

                    <!-- *** Single Articles Area *** -->
                    <div class="single-articles-area style-2 d-flex flex-wrap mb-30 wow fadeInUp"
                         data-wow-delay="300ms">
                        <div class="article-thumbnail">
                            <img src="${ctx}/img/bg-img/6.jpg" alt="">
                        </div>
                        <div class="article-content">
                            <a href="single-post.jsp" class="post-title">索尼2018年新品</a>
                            <div class="post-meta">
                                <a href="#" class="post-date">July 12, 2018</a>
                                <a href="#" class="post-comments">2 Comments</a>
                            </div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris velit arcu, scelerisque
                                dignissim massa quis, mattis facilisis erat. Aliquam erat volutpat. Sed efficitur
                                diam.</p>
                        </div>
                    </div>

                    <!-- *** Single Articles Area *** -->
                    <div class="single-articles-area style-2 d-flex flex-wrap mb-30 wow fadeInUp"
                         data-wow-delay="500ms">
                        <div class="article-thumbnail">
                            <img src="${ctx}/img/bg-img/7.jpg" alt="">
                        </div>
                        <div class="article-content">
                            <a href="single-post.jsp" class="post-title">成为最强玩家的10条秘诀</a>
                            <div class="post-meta">
                                <a href="#" class="post-date">July 12, 2018</a>
                                <a href="#" class="post-comments">2 Comments</a>
                            </div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris velit arcu, scelerisque
                                dignissim massa quis, mattis facilisis erat. Aliquam erat volutpat. Sed efficitur
                                diam.</p>
                        </div>
                    </div>

                    <!-- *** Single Articles Area *** -->
                    <div class="single-articles-area style-2 d-flex flex-wrap mb-30 wow fadeInUp"
                         data-wow-delay="700ms">
                        <div class="article-thumbnail">
                            <img src="${ctx}/img/bg-img/8.jpg" alt="">
                        </div>
                        <div class="article-content">
                            <a href="single-post.jsp" class="post-title">微软有一些新的技巧</a>
                            <div class="post-meta">
                                <a href="#" class="post-date">July 12, 2018</a>
                                <a href="#" class="post-comments">2 Comments</a>
                            </div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris velit arcu, scelerisque
                                dignissim massa quis, mattis facilisis erat. Aliquam erat volutpat. Sed efficitur
                                diam.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-4">
                <!-- Title -->
                <h2 class="section-title mb-70 wow fadeInUp" data-wow-delay="100ms">本周成交</h2>

                <!-- Single Widget Area -->
                <div class="single-widget-area add-widget wow fadeInUp" data-wow-delay="300ms">
                    <a href="#"><img src="${ctx}/img/bg-img/add.png" alt=""></a>
                    <!-- Side Img -->
                    <img src="${ctx}/img/bg-img/side-img.png" class="side-img" alt="">
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ##### Articles Area End ##### -->

<!-- ##### Footer Area Start ##### -->
<footer class="footer-area">
    <!-- Main Footer Area -->
    <div class="main-footer-area section-padding-100-0">
        <div class="container">
            <div class="row">
                <!-- Single Footer Widget -->
                <div class="col-12 col-sm-6 col-lg-3">
                    <div class="single-footer-widget mb-70 wow fadeInUp" data-wow-delay="100ms">
                        <div class="widget-title">
                            <a href="index.jsp"><img src="${ctx}/img/core-img/logo2.png" alt=""></a>
                        </div>
                        <div class="widget-content">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris velit arcu, scelerisque
                                dignissim massa quis, mattis facilisis erat. Aliquam erat volutpat. Sed efficitur diam
                                ut interdum ultricies.</p>
                        </div>
                    </div>
                </div>

                <!-- Single Footer Widget -->
                <div class="col-12 col-sm-6 col-lg-3">
                    <div class="single-footer-widget mb-70 wow fadeInUp" data-wow-delay="300ms">
                        <div class="widget-title">
                            <h4>游戏预览</h4>
                        </div>
                        <div class="widget-content">
                            <nav>
                                <ul>
                                    <li><a href="#">Doom</a></li>
                                    <li><a href="#">Grand Theft Auto</a></li>
                                    <li><a href="#">Bloodborne</a></li>
                                    <li><a href="#">God of war</a></li>
                                    <li><a href="#">Persona 5</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>

                <!-- Single Footer Widget -->
                <div class="col-12 col-sm-6 col-lg-3">
                    <div class="single-footer-widget mb-70 wow fadeInUp" data-wow-delay="500ms">
                        <div class="widget-title">
                            <h4>技巧链接</h4>
                        </div>
                        <div class="widget-content">
                            <nav>
                                <ul>
                                    <li><a href="#">Testimanials</a></li>
                                    <li><a href="#">Reviews</a></li>
                                    <li><a href="#">New Games</a></li>
                                    <li><a href="#">Forum</a></li>
                                    <li><a href="#">Contact</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>

                <!-- Single Footer Widget -->
                <div class="col-12 col-sm-6 col-lg-3">
                    <div class="single-footer-widget mb-70 wow fadeInUp" data-wow-delay="700ms">
                        <div class="widget-title">
                            <h4>新鲜玩意</h4>
                        </div>
                        <div class="widget-content">
                            <nav>
                                <ul>
                                    <li><a href="#">Doom</a></li>
                                    <li><a href="#">Grand Theft Auto</a></li>
                                    <li><a href="#">Bloodborne</a></li>
                                    <li><a href="#">God of war</a></li>
                                    <li><a href="#">Persona 5</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Copywrite Area -->
    <div class="copywrite-content">
        <div class="container h-100">
            <div class="row h-100 align-items-center">
                <div class="col-12 col-sm-5">
                    <!-- Copywrite Text -->
                    <p class="copywrite-text"><a href="#">
                        Copyright &copy; 2018.Company name All rights reserved.</a><br>
                        <a target="_blank" href="#">金雕国王未来科技有限公司</a>
                    </p>
                </div>
                <div class="col-12 col-sm-7">
                    <!-- Footer Nav -->
                    <div class="footer-nav">
                        <ul>
                            <li><a href="index.jsp">首页</a></li>
                            <li><a href="user_gameList?pageNum=1">游戏</a></li>
                            <li><a href="post.jsp">文章</a></li>
                            <li><a href="#">游戏预览</a></li>
                            <li><a href="contact.jsp">联系我们</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- ##### Footer Area End ##### -->

<!-- ##### All Javascript Script ##### -->
<!-- jQuery-2.2.4 js -->
<script src="${ctx}/js/jquery/jquery-2.2.4.min.js"></script>
<!-- Popper js -->
<script src="${ctx}/js/bootstrap/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="${ctx}/js/bootstrap/bootstrap.min.js"></script>
<!-- All Plugins js -->
<script src="${ctx}/js/plugins/plugins.js"></script>
<!-- Active js -->
<script src="${ctx}/js/active.js"></script>
</body>

</html>